<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1 maximum-scale=2, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-title" content="Add to Home">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="x-rim-auto-match" content="none">
		<title>风盾金控服务平台-上传身份证</title>
		<meta name="keywords" content="风盾金控服务平台-上传身份证">
		<meta name="description" content="风盾金控服务平台-上传身份证">
		<meta name="Copyright" content="风盾金控服务平台-上传身份证">
		<meta name="author" content="风盾金控服务平台-上传身份证">
		<link th:href="@{/loanStatic/uploadIDCard/css/publi.css}" rel="stylesheet" type="text/css">
		<link th:href="@{/loanStatic/uploadIDCard/css/style.css}" rel="stylesheet" type="text/css">
	</head>
	<body>
		<section id="loading"></section>
		<header class="acc_head">
			<div class="clearfix">
				<h1 class="tc">上传正反身份证</h1>
			</div>
		</header>
		<section class="acc_apply">
			<ul>
				<li class="clearfix">
					<label class="tl acc_five">身份证姓名：<span th:text="${bankDO.realName}"></span></label>
				</li>
				<li class="clearfix">
					<label class="tl acc_five">身份证号码：<span th:text="${bankDO.idNo}"></span></label>
				</li>
				<li class="clearfix" >
					<label class="tl acc_four fl">证件照片：</label>
				</li>
				<li style="border-top: 0; margin-bottom: 60px;">
					<div class="acc_img">
						<p class="tc">参考样例</p>
						<div id="sss">
							<img style="width: 100%;height: 180px" class="acc_imgin" th:src="@{/loanStatic/uploadIDCard/img/front.jpg}" id="img0">
						</div>
						<div class="acc_sc">
							<a href="javascript:;" class="tc acc_scicon"><strong>上传身份正面</strong></a>
							<input type="file" name="file0" id="file0" multiple class="ph08" />
						</div>
						
						<div id="sss">
							<img style="width: 100%;height: 180px" class="acc_imgin" th:src="@{/loanStatic/uploadIDCard/img/back.jpg}" id="img1">
						</div>
						<div class="acc_sc">
							<a href="javascript:;" class="tc acc_scicon"><strong>上传身份反面</strong></a>
							<input type="file" name="file1" id="file1" multiple class="ph08" />
						</div>
						<p class="ph09 ">注：身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，照片内容真实有效。不得做任何修改。支持jpg、jpeg格式照片。大小不超过2M</p>
					</div>
				</li>
			</ul>
		</section>
		<footer class="acc_foot clearfix">
			<!-- <a href="#" class="fl tc acc_cancel">取消</a> -->
			<a href="#" class="fl tc acc_sure">提交</a>
		</footer>
		<!--弹出层-->
		<article id="tip">
			<div class="pack">
				<h1 class="tc">提交成功</h1>
				<p class="tc"></p>
				<a onclick="jumpBtn()">确定</a>
			</div>
		</article>
		<!-- 网站要用到的一些类库 -->
		<script th:src="@{/loanStatic/uploadIDCard/js/jquery1.8.3.min.js}"></script>
		<script th:src="@{/loanStatic/uploadIDCard/js/script.js}"></script>
		<script type="text/javascript">
		function jumpBtn(){
			window.location.href='/moblie/home';
		}
			$(function() {
				$(window).on("load", function() {
						$("#loading").fadeOut();
					})
					// ========================================浮层控制
				$("#tip .pack a").on("click", function() {
					$("#tip").fadeOut()
					$("#tip .pack p").html("")
					return false;
				})

				function alerths(str) {
					$("#tip").fadeIn()
					$("#tip .pack p").html(str)
					return false;
				}
				$(".acc_sure").on("click", function() {
					alerths("请等待审核！")
					return false;
				})
				//身份证正面
				$("#file0").change(function() {
					if (this.files && this.files[0]) {
						var objUrl = getObjectURL(this.files[0]);
						console.log("objUrl = " + objUrl);
						if (objUrl) {
						  $("#img0").attr("src", objUrl);
							$("#file0").click(function(e) {
								$("#img0").attr("src", objUrl);
							});  
						} else {
							//IE下，使用滤镜
							this.select();
							var imgSrc = document.selection.createRange().text;
							var localImagId = document.getElementById("sss");
							//图片异常的捕捉，防止用户修改后缀来伪造图片
							try {
								preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
							} catch (e) {
								this._error("filter error");
								return;
							}
							this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
						}
					}
				});
				//身份证反面
				$("#file1").change(function() {
					if (this.files && this.files[0]) {
						var objUrl = getObjectURL(this.files[0]);
						console.log("objUrl = " + objUrl);
						if (objUrl) {
							$("#img1").attr("src", objUrl);
							$("#file1").click(function(e) {
								$("#img1").attr("src", objUrl);
							});
						} else {
							//IE下，使用滤镜
							this.select();
							var imgSrc = document.selection.createRange().text;
							var localImagId = document.getElementById("sss");
							//图片异常的捕捉，防止用户修改后缀来伪造图片
							try {
								preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
							} catch (e) {
								this._error("filter error");
								return;
							}
							this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
						}
					}
				});
				
				
				//建立一個可存取到該file的url
				function getObjectURL(file) {
					var url = null;
					if (window.createObjectURL != undefined) { // basic
						url = window.createObjectURL(file);
					} else if (window.URL != undefined) { // mozilla(firefox)
						url = window.URL.createObjectURL(file);
					} else if (window.webkitURL != undefined) { // webkit or chrome
						url = window.webkitURL.createObjectURL(file);
					}
					return url;
				}
			})
		</script>
	</body>
</html>